import React from './react';
import ReactDOM from './react-dom';
// function FunctionComponent(props){
//   return <div className="title" style={{ color: 'red' }}><span>{props.name}</span>{props.children}</div>
// }
// let element = <FunctionComponent name="hello">world</FunctionComponent>

class ClassComponent extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div className="title" style={{ color: 'red' }}><span>{this.props.name}</span>{this.props.children}</div>
    )
  }
}
let element = <ClassComponent name="hello">world</ClassComponent>


ReactDOM.render(
  element,
  document.getElementById('root')
);

// {
//   "type": "h1",
//   "key": null,
//   "ref": null,
//   "props": {
//       "className": "title",
//       "style": {
//           "color": "red"
//       },
//       "children": "hello"
//   },
//   "_owner": null,
//   "_store": {}
// }

// {
//   "type": "h1",
//   "key": null,
//   "ref": null,
//   "props": {
//       "className": "title",
//       "style": {
//           "color": "red"
//       },
//       "children": [
//           "hello",
//           {
//               "type": "span",
//               "key": null,
//               "ref": null,
//               "props": {
//                   "children": "Ikki"
//               },
//               "_owner": null,
//               "_store": {}
//           }
//       ]
//   },
//   "_owner": null,
//   "_store": {}
// }